<template>
  <div class="home">
    <div v-for="(item, index) of movies" :key="index">
      <h1>{{ index|handleTitle }} <span @click="toMore(index)">更多</span></h1>
      <div class="container">
        <movie-http
          @toggle="handleClick"
          v-for="val of item"
          :key="val._id"
          :item="val"
        ></movie-http>
      </div>
    </div>
  </div>
</template>

<script>
import HomeHttp from "../../model/HomeHttp";
import MovieHttp from "../../components/Movie/MovieItem.vue";

export default {
  data() {
    return {
      movies: {},
    };
  },
  components: {
    MovieHttp,
  },
  name: "Home",
  async mounted() {
    var https = ["top250", "comingSoon", "inTheaters"];
    var movies = {};
    for (let val of https) {
      let res = await HomeHttp.getMovie(val);
      movies[val] = res.data.res.slice(0,3);
    }
    this.movies = movies
    for (let key in this.movies) {
      this.movies[key].forEach((item) => {
        var { rating, raiting } = item;
        item.star = rating
          ? HomeHttp.handleStar(rating)
          : HomeHttp.handleStar(raiting);
      });
    }
  },
  filters: {
    handleTitle(val) {
      if (val == "inTheaters") {
        return "正在热映";
      } else if (val == "comingSoon") {
        return "即将上映";
      }
      return val;
    },
  },
  methods: {
    handleClick(id, title) {
      this.$router.push(`/detail/${id}`);
      this.$store.commit("changeTitle", title);
    },
    toMore(index) {
      console.log(index);
      this.$router.push(`/more?title=${index}`);
    },
  },
};
</script>
